<template>
  <div class="app-index">
    <el-header style="height:54px; padding:0">
      <div class="flex-auto">
        <my-header :collapse="collapse">
          <div :class="!collapse?'header-logo':'header-logo-hidden'">

            <div class="logo-flex">
              <img src="../assets/platformDetail/logo.png"
                   style="width: 32px;height:fit-content;" />
            </div>
            <div class="name"
                 v-if="!collapse">
              建筑室内环境健康性能监测与预警系统
            </div>
          </div>
          <span @click="menuCollapse"
                class="iconSize">
            <i v-if="!collapse"
               class="el-icon-s-fold"></i>
            <i v-else
               class="el-icon-s-unfold"></i>
          </span>
        </my-header>
      </div>
    </el-header>
    <div class="content">
      <div class="menuBox"
           :class="!collapse?'menuBox-expand':'menuBox-no-expand'"
           :style="`height:${menuH}px`">

        <el-menu class="el-menu-vertical-demo"
                 :default-active="activedIndex"
                 :router="true">
          <template v-for="item in menuList">
            <el-menu-item :key="item.path"
                          v-if="item.children == null"
                          :index="item.path">
              <img :src="require(`@/assets/menu/${item.meta.icon}.png`)" />
              <template #title>{{ item.meta.title }}</template>
            </el-menu-item>
            <template v-else>
              <el-sub-menu :index="item.path"
                           :key="item.path">
                <!-- <i :class="item.icon"></i> -->
                <template #title>
                  <i class="iconfont"
                     :class="item.meta.icon"></i>
                  <span>{{ item.meta.title }}</span>
                </template>
                <el-menu-item :index="subItem.path"
                              v-for="subItem in item.children"
                              :key="subItem.path">
                  <i class="iconfont"
                     :class="subItem.icon"></i>
                  <template #title>{{ subItem.meta.title }}</template>
                </el-menu-item>
              </el-sub-menu>
            </template>
          </template>
        </el-menu>

      </div>

      <div class="rightBox"
           :style="`height:${contentH}px`">
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </div>
    </div>
  </div>
</template>
<script>
import myHeader from "@/components/Header";
import store from "@/store/modules/user";
export default {
  name: "",
  components: {
    myHeader
  },
  data() {
    return {
      activedIndex: "",
      collapse: false,
      userInfo: store.state.userInfo,
      contentH: 0,
      menuH: 0,
      menuList: [
        {
          path: "/home",
          name: "Dashboard",
          meta: { title: "首页", icon: "home", affix: true }
        },
        // {
        //   path: "/workSpace",
        //   name: "workSpace",
        //   meta: { title: "工作空间", icon: "el-icon-cloudy", affix: true },
        //   children: [
        {
          path: "/deviceManage",
          name: "deviceManage",
          meta: { title: "设备管理", icon: "deviceManage", affix: true }
        },
        {
          path: "/projectManage",
          name: "projectManage",
          meta: {
            title: "项目/建筑管理",
            icon: "projectManage",
            affix: true
          }
        },
        {
          path: "/platformManage",
          name: "platformManage",
          meta: { title: "平台管理", icon: "platformManage", affix: true }
        },
        {
          path: "/sceneManage",
          name: "sceneManage",
          meta: { title: "场图管理", icon: "sceneManage", affix: true }
        },
      ]
    };
  },
  mounted() {
    const _this = this;
    this.activedIndex = this.$route.path;
    this.contentH = document.documentElement.clientHeight - 59;
    this.menuH = document.documentElement.clientHeight - 80;
    window.addEventListener("resize", () => {
      this.contentH = document.documentElement.clientHeight - 59;
      this.menuH = document.documentElement.clientHeight - 80;
    });
    /*var userAdminList = [
      {
        path: "/sceneManage",
        name: "sceneManage",
        meta: { title: "场图管理", icon: "sceneManage", affix: true }
      }
    ];
    if (this.userInfo.role == "ADMIN" || this.userInfo.name == "xylocopa") {
      this.menuList = this.menuList.concat(userAdminList);
    }*/
    var adminList = [
      {
        path: "/userManage",
        name: "userManage",
        meta: { title: "用户管理", icon: "userManage", affix: true }
      }
    ];
    if (this.userInfo.role == "ADMIN") {
      this.menuList = this.menuList.concat(adminList);
    }
    var inventoryList = [
      {
        path: "/inventoryManage",
        name: "inventoryManage",
        meta: { title: "库存管理", icon: "inventoryManage", affix: true }
      }
    ];
    if (this.userInfo.role == "ADMIN") {
      this.menuList = this.menuList.concat(inventoryList);
    }
    this.activedIndex = "/" + this.$route.path.split("/")[1];
  },
  watch: {
    $route(to, from) {
      this.activedIndex = "/" + this.$route.path.split("/")[1];
    }
  },
  methods: {
    menuCollapse() {
      this.collapse = !this.collapse;
    }
  }
};
</script>
<style>
.app-index {
  background-color: #edf0f3;
}
.app-index .el-menu {
  height: 80%;
  width: 100% !important;
  background-color: #ffffff;
}
.app-index .menuBox-no-expand {
  width: 80px !important;
}
.app-index .el-menu-item {
  height: 50px !important;
  position: relative;
}
.app-index .el-menu-item img {
  margin-right: 10px;
}
.app-index .el-menu-item:hover,
.el-menu-item:focus {
  height: 50px !important;
  position: relative;
}
.app-index .el-menu-item:hover::after,
.app-index .el-menu-item:focus::after {
  position: absolute;
  right: 0;
  width: 4px;
  height: 50px;
  background-color: #1d99ef;
  border-radius: 2px;
  content: "";
}
.app-index .el-menu-item,
.el-sub-menu__title {
  color: #1d99ef;
  font-size: 14px;
}
.app-index .el-menu-item i {
  color: #1d99ef;
  font-size: 14px;
}
.app-index .el-sub-menu__title {
  color: #1d99ef;
  font-size: 14px;
}
.app-index .el-sub-menu {
  color: #1d99ef;
}
.app-index .el-menu-item:hover,
.el-menu-item:focus {
  background: linear-gradient(88.31deg, #dbf0ff 1.43%, #ffffff 98.57%);
}
.app-index .el-menu-item:hover {
  background: linear-gradient(88.31deg, #dbf0ff 1.43%, #ffffff 98.57%);
}
.app-index .el-menu-item:focus {
  background: linear-gradient(88.31deg, #dbf0ff 1.43%, #ffffff 98.57%);
}
.app-index .el-menu-item.is-active {
  position: relative;
  background: linear-gradient(88.31deg, #dbf0ff 1.43%, #ffffff 98.57%);
}
/* .app-index .el-sub-menu__title:hover,
.el-sub-menu__title:focus {
  background: linear-gradient(88.31deg, #dbf0ff 1.43%, #ffffff 98.57%);
} */
.app-index .el-sub-menu__title i {
  color: #1d99ef !important;
}
/* .el-menu.el-menu-vertical-demo {
  width: 270px !important;
} */
.app-index .menuBox::-webkit-scrollbar {
  width: 0px;
}

.app-index .menuBox::-webkit-scrollbar-track {
  background-color: none;
}

.app-index .menuBox::-webkit-scrollbar-thumb {
  background-color: none;
}

.app-index .menuBox::-webkit-scrollbar-thumb:hover {
  background-color: none;
  position: relative;
}

.app-index .menuBox::-webkit-scrollbar-thumb:active {
  background-color: none;
  position: relative;
}
.app-index .main::-webkit-scrollbar {
  width: 0px;
}

.app-index .main::-webkit-scrollbar-track {
  background-color: none;
}

.app-index .main::-webkit-scrollbar-thumb {
  background-color: none;
}

.app-index .main::-webkit-scrollbar-thumb:hover {
  background-color: none;
}

.app-index .main::-webkit-scrollbar-thumb:active {
  background-color: none;
}
.app-index .el-menu {
  border-right: none !important;
}
.app-index .el-main {
  padding: 0;
  margin: 16px 16px 0px 0px;
  border-radius: 4px;
}
</style>
<style>
.app-index .menuBox::-webkit-scrollbar {
  width: 0px;
}

.app-index .menuBox::-webkit-scrollbar-track {
  background-color: none;
}

.app-index .menuBox::-webkit-scrollbar-thumb {
  background-color: none;
}

.app-index .menuBox::-webkit-scrollbar-thumb:hover {
  background-color: none;
}

.app-index .menuBox::-webkit-scrollbar-thumb:active {
  background-color: none;
}
.app-index .main::-webkit-scrollbar {
  width: 0px;
}

.app-index .main::-webkit-scrollbar-track {
  background-color: none;
}

.app-index .main::-webkit-scrollbar-thumb {
  background-color: none;
}

.app-index .main::-webkit-scrollbar-thumb:hover {
  background-color: none;
}

.app-index .main::-webkit-scrollbar-thumb:active {
  background-color: none;
}
.app-index .el-menu {
  border-right: none !important;
}
</style>
<style lang="scss" scoped>
.collapse-flex-box {
  width: 100%;
  color: #333;
  font-size: 24px;
}
.content {
  width: 100vw;
  display: flex;
  flex-direction: row;
  .flex-auto {
    height: 100%;
    overflow-y: scroll;
  }
  .rightBox {
    min-height: 100%;
    flex: 1 1 auto;
    width: 0;
    .main {
      height: 0;
      min-height: 100%;
      box-sizing: border-box;
    }
  }
}
.header {
  line-height: 60px;
  border-bottom: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.header-logo {
  width: 200px;
  display: flex;
  margin-right: 20px;
  .name {
    margin-left: 12px;
  }
}
.header-logo-hidden {
  width: 80px;
  display: flex;
  margin-right: 20px;
}
.menuBox {
  position: relative;
  overflow-y: scroll;
  width: 200px;
  padding: 12px;
  margin: 16px;
  border-radius: 4px;
  // background-color: rgb(40, 51, 62);
  background-color: #ffffff;
  .project-name {
    // color: #1890ff;
    height: 50px;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
  }
  .bottom {
    padding: 15px;
    position: absolute;
    bottom: 0px;
    .name {
      text-align: center;
      margin-top: 10px;
      font-size: 14px;
      font-weight: 400;
      line-height: 19px;
      color: #636975;
    }
  }
}
.menuBox-expand {
  width: 200px;
  transition: width 0.5s;
}
.menuBox-no-expand {
  width: 64px;
  transition: width 0.5s;
}
.el-menu-vertical-demo .iconfont {
  margin-right: 10px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.iconSize {
  font-size: 26px !important;
  line-height: 54px;
  display: flex;
  align-items: center;
}
.logo-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.platform-name {
  font-size: 18px;
  font-weight: 400;
  line-height: 40px;
  color: #fafafa;
  text-align: center;
}
@media screen and (max-width: 1440px) {
  .title {
    font-size: 14px;
    font-weight: bold;
    line-height: 21px;
    color: #0a0a0a;
  }
}
</style>
